<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>3_虚拟DOM与真实DOM</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <!-- jsx转化为js -->
    <script src="../js/babel.min.js"></script>
  </head>
  <body>
    <div id="test"></div>
    <div id="demo"></div>
    <script type="text/babel">  /* 此处一定要写babel */
      // 1.创建虚拟DOM
      const VDOM = (                     // 此处一定不要写引号，也不能使用`，因为不是字符串；并且h1标签需要闭合，否则报错 react SyntaxError：内联Babel脚本：Unterminated JSX内容
        <h1 id="title">
          <span>Hello world!</span>
        </h1>
      )
      // 2.渲染虚拟DOM到页面
      ReactDOM.render(VDOM, document.getElementById("test"))

      const TDOM = document.getElementById("demo");

      console.log("虚拟DOM", VDOM);
      console.log("真实DOM", TDOM);
      debugger
      // console.log(typeof VDOM);
      // console.log(VDOM instanceof Object);
      /* 
        关于虚拟DOM
          1.本质是Object类型的对象（一般对象）
          2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
          3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。
      */
    </script>

  </body>
</html>